/**
 * 详细配置网站：https://cn.windicss.org/utilities/general/colors.html
 * windicss常用class。
 * 字体大小：text-12px text-14px text-16px ... text-100px
 * 字体粗细：font-100 font-200 font-300 font-400 font-500 font-600 font-700 font-800 font-900
 * 字体间距：tracking-1px tracking-2px tracking-3px
 * 行高：leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose
 * 文本透明度：text-opacity-0 text-opacity-10 ... text-opacity-100
 * 文本阴影：text-shadow-none text-shadow-sm text-shadow text-shadow-md text-shadow-lg text-shadow-xl
 * 文本对齐：text-left text-center text-right text-justify text-underline text-no-underline
 * 文本转换：uppercase lowercase capitalize normal-case
 *
 * https://cn.windicss.org/utilities/layout/flexbox.html
 * flex布局：flex flex-row flex-col flex-wrap flex-wrap-reverse flex-nowrap flex-1 flex-auto flex-initial flex-none
 * flex布局-对齐：items-start items-end items-center items-baseline items-stretch
 * flex布局-排列：justify-start justify-end justify-center justify-between justify-around justify-evenly
 *
 * 定位：absolute fixed relative static sticky
 * top：top-1px top-2px top-3px ... top-1000px
 * right：right-1px right-2px right-3px ... right-1000px
 * bottom：bottom-1px bottom-2px bottom-3px ... bottom-1000px
 * left：left-1px left-2px left-3px ... left-1000px
 * z-index：z-0 z-10 z-20 z-30 z-40 z-50
 * 左右居中定位: left-1/2 transform -translate-x-1/2
 * 上下居中定位: top-1/2 transform -translate-y-1/2
 *
 * 背景渐变颜色-方向：bg-gradient-to-t bg-gradient-to-tr bg-gradient-to-r bg-gradient-to-br bg-gradient-to-b ...
 * 背景渐变颜色-开始颜色：from-transparent from-current from-black from-white from-red from-green from-blue
 * 背景渐变颜色-结束颜色：to-transparent to-current to-black to-white to-red to-green to-blue
 *
 * 背景图像位置：bg-center bg-left bg-right bg-top bg-bottom bg-left-top
 * 背景图片重复：bg-no-repeat bg-repeat bg-repeat-x bg-repeat-y
 * 背景大小：bg-auto bg-cover bg-contain bg-100
 * 背景颜色：bg-black bg-white bg-red bg-green bg-blue
 * 背景颜色透明度：bg-opacity-0 bg-opacity-10 ... bg-opacity-100
 * 背景使用自定义颜色：bg-[var(--main)]
 * border使用自定义颜色：border-[var(--main)]
 * 字体使用自定义颜色：text-[var(--main)]
 *
 * overflow：overflow-auto overflow-hidden overflow-visible overflow-scroll
 * overflow-x：overflow-x-auto overflow-x-hidden overflow-x-visible overflow-x-scroll
 * overflow-y：overflow-y-auto overflow-y-hidden overflow-y-visible overflow-y-scroll
 *
 * margin：m-1px m-2px m-3px
 * margin-x：mx-1px mx-2px mx-3px
 * margin-y：my-1px my-2px my-3px
 * margin-top：mt-1px mt-2px mt-3px
 * margin-right：mr-1px mr-2px mr-3px
 * margin-bottom：mb-1px mb-2px mb-3px
 * margin-left：ml-1px ml-2px ml-3px
 *
 * padding：p-1px p-2px p-3px
 * padding-x：px-1px px-2px px-3px
 * padding-y：py-1px py-2px py-3px
 * padding-top：pt-1px pt-2px pt-3px
 * padding-right：pr-1px pr-2px pr-3px
 * padding-bottom：pb-1px pb-2px pb-3px
 * padding-left：pl-1px pl-2px pl-3px
 *
 * https://cn.windicss.org/utilities/layout/sizing.html
 * 宽度：w-1px w-2px w-3px w-full w-100px
 * 最小宽度：min-w-1px min-w-2px min-w-3px
 * 最大宽度：max-w-1px max-w-2px max-w-3px
 *
 * 高度：h-1px h-2px h-3px h-full h-100px
 * 最小高度：min-h-1px min-h-2px min-h-3px
 * 最大高度：max-h-1px max-h-2px max-h-3px
 *
 * border-width：border-1 border-2 border-3 border-4 border-5 border-1px border-2px border-3px
 * border-opacity：border-opacity-0 border-opacity-10 ... border-opacity-100
 * border-style：border-solid border-dashed border-dotted border-double border-none
 * border-color：border-black border-white border-red border-green border-blue
 * border-radio：rounded-1px rounded-2px rounded-3px
 *
 * 分割线-x：divide-x divide-x-2 divide-x-4 divide-x-8
 * 分割线-y：divide-y divide-y-2 divide-y-4 divide-y-8
 * 分割线-opacity：divide-opacity-0 divide-opacity-10 ... divide-opacity-100
 * 分割线颜色：divide-black divide-white divide-red divide-green divide-blue
 * 分割线风格：divide-solid divide-dashed divide-dotted divide-double divide-none
 *
 * 盒子阴影大小：shadow-sm shadow-md shadow-lg shadow-xl shadow-2xl shadow-inner shadow-none
 * 盒子阴影颜色：shadow-black shadow-white shadow-red shadow-green shadow-blue
 *
 * 鼠标：cursor-pointer cursor-default cursor-wait
 *
 * 动画：animate-none animate-spin animate-ping animate-pulse animate-bounce
 */

import { defineConfig } from "windicss/helpers";

// 生成12px到100px的字体大小，间隔为2px；示例：text-12px text-14px text-16px
let fontSize = {};
for (let i = 12; i < 100; i += 2) {
  fontSize[`${i}px`] = `${i}px`;
}

// 生成border-radio,1px到50px的圆角；示例：rounded-1px rounded-2px rounded-3px
let borderRadius = {};
for (let i = 1; i < 50; i++) {
  borderRadius[`${i}px`] = `${i}px`;
}
export default defineConfig({
  attributify: true,
  theme: {
    extend: {
      colors: {},
      fontSize,
      borderRadius,
      backgroundSize: {
        100: "100% 100%"
      },
      width: {
        100: "100%"
      },
      height: {
        100: "100%"
      }
    }
  },
  // 自定义组合
  shortcuts: {
    // 宽高100%
    "w-h-100": "w-100 h-100",
    // 边框
    solid: "border border-solid",
    dashed: "border border-dashed",
    dotted: "border border-dotted",
    double: "border border-double",

    // 背景图片
    bg: "bg-no-repeat bg-center bg-100",

    // flex布局
    row: "flex flex-row",
    col: "flex flex-col",

    "row-wrap": "flex flex-row flex-wrap",
    "col-wrap": "flex flex-col flex-wrap",

    "row-items-center": "flex flex-row items-center",
    "row-justify-center": "flex flex-row justify-center",

    "col-items-center": "flex flex-col items-center",
    "col-justify-center": "flex flex-col justify-center",

    "row-items-justify-center": "flex flex-row items-center justify-center",
    "col-items-justify-center": "flex flex-col items-center justify-center",

    // 定位,左右居中,上下居中,左右上下居中
    "left-center": "left-1/2 transform -translate-x-1/2",
    "top-center": "top-1/2 transform -translate-y-1/2",
    "left-top-center": "left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
  }
});
